<template>
  <div>
    <div class="top">
      <i class="iconfont icon-fanhui" @click.stop="$router.go(-1)"></i>
      <h3>歌手分类</h3>
    </div>
    <div class="sgClassify">
      <ul>
        <li>
          <router-link replace  :to="{
            path: '/singer/thepopularsinger',
            query: {
              type: -1,
              area: 7,
            },
          }">华语</router-link>
        </li>
        <li>
          <routerLink replace  :to="{
            path: '/singer/thepopularsinger',
            query: {
              type: -1,
              area: 96,
            },
          }">欧美</routerLink>
        </li>
        <li>
          <routerLink replace  :to="{
            path: '/singer/thepopularsinger',
            query: {
              type: -1,
              area: 8,
            },
          }">日本</routerLink>
        </li>
        <li>
          <routerLink replace  :to="{
            path: '/singer/thepopularsinger',
            query: {
              type: -1,
              area: 16,
            },
          }">韩国</routerLink>
        </li>
        <li>
          <routerLink replace :to="{
            path: '/singer/thepopularsinger',
            query: {
              type: -1,
              area: 0,
            },
          }">其他</routerLink>
        </li>
      </ul>
      <ol>
        <li>
          <routerLink replace :to="{
            path: '/singer/thepopularsinger',
            query: {
              type: 1,
              area: -1,
            },
          }">男</routerLink>
        </li>
        <li>
          <routerLink replace  :to="{
            path: '/singer/thepopularsinger',
            query: {
              type: 2,
              area: -1,
            },
          }">女</routerLink>
        </li>
        <li>
          <routerLink replace  :to="{
            path: '/singer/thepopularsinger',
            query: {
              type: 3,
              area: -1,
            },
          }">乐队/组合</routerLink>
        </li>
      </ol>
    </div>
    <router-view></router-view>

  </div>
</template>

<script>

export default {
  data() {
    return {
      
    }
  },
};
</script>

<style lang="scss"  scoped>



.top {
  display: flex;
  height: 30px;
  align-items: center;
  i {
    margin: 0 10px;
    font-size: 20px;
  }
  h3 {
    font-size: 14px;
  }
}
.sgClassify {
  // height: 30px;
  // background: skyblue;
  ul {
    display: flex;

    li {
      margin: 5px 10px;
      a {
        color: #6f6f6f;
        font-size: 14px;
        
      }
    }
  }
.router-link-exact-active{
    color: red;
  }
  ol {
    display: flex;

    li {
      margin: 5px 17px;

      a {
        color: #6f6f6f;
        font-size: 14px;
      }
    }
  }
}
.content {
  /* 注意：不要设置高度 */
  width: 100%;
  position: absolute;
  top: 90px;
  bottom: 0px;
  display: flex;
  overflow: hidden;
}

.content .left {
  flex: 0 0 80px;
  background-color: #c8efd4;
}

.content .left li {
  width: 100%;
  text-align: center;
}

.content .left li span {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 14px;
}

.content .left li.current span {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  background-color: #6bd089;
}

.content .right {
  flex: 1;
}

.content .right h2 {
  height: 20px;
  line-height: 20px;
  color: #fff;
  background-color: #dadbdc;
  text-indent: 10px;
  font-size: 12px;
}

.content .right .lists p {
  height: 55px;
  display: flex;
  margin: 0px 5px;
  border-bottom: 1px solid #e3e4e5;
}

.content .right .lists p:last-of-type {
  border: none;
}

.content .right .lists p img {
  margin-top: 3px;
  width: 48px;
  height: 48px;
}

.content .right .lists p span {
  margin-top: 3px;
  display: inline-block;
  height: 48px;
  line-height: 48px;
  flex: 1;
  margin-left: 13px;
  font-size: 15px;
  color: #424242;
}

.rightNumList {
  position: absolute;
  z-index: 999;
  top: 82px;
  right: 5px;
  font-size: 13px;
  color: #515153;
  text-align: center;

  .item {
    margin-bottom: 8px;

    &.current {
      color: red;
    }
  }
}
</style>